<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable :columns="columns" ref="proRef" :requestApi="getSwiper" :initParam="initParams">
        <template #tableHeader="scope">
          <el-button type="primary" @click="opera(undefined)">添加相册</el-button>
          <el-button type="danger" :disabled="scope.selectedListIds.length === 0" @click="deleteSwiperApi(scope.selectedListIds)"
            >批量删除</el-button
          >
        </template>
        <template #cover="{ row }">
          <el-image :src="row.cover ? row.cover : url(prefix, row.url)" fit="scale-down" class="w-90px h-90px"></el-image>
        </template>
        <template #goUrl="{ row }">
          {{ row.goUrl ? row.goUrl : "无" }}
        </template>
        <template #opera="{ row }">
          <el-button link :icon="EditPen" type="primary" @click="opera(row)">编辑</el-button>
          <el-button link :icon="Delete" type="primary" @click="deleteSwiperApi([row.id])">删除</el-button>
        </template>
      </ProTable>
    </div>
    <roomDrawer ref="swRef"></roomDrawer>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import roomDrawer from "../components/roomDrawer.vue";
import { ref, reactive } from "vue";
import { useRoute } from "vue-router";
import { createSwiper, editSwiper, getSwiper, deleteSwiper } from "@/api/modules/room_swiper";
import { EditPen, Delete } from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";
import { useUserStore } from "@/stores/modules/user";
import { url } from "@/utils/index";
const {
  userInfo: { prefix }
} = useUserStore();

const route = useRoute();

const initParams = reactive({
  pageSize: 10,
  pageNum: 1,
  louPanId: parseInt(route.query.id as string),
  roomId: parseInt(route.query.roomId as string)
});

const deleteSwiperApi = async (ids: any) => {
  await useHandleData(deleteSwiper, { ids }, "删除所选内容");
  proRef.value?.getTableList();
};

const swRef = ref<InstanceType<typeof roomDrawer> | null>();

const proRef = ref<InstanceType<typeof ProTable> | null>();

const columns: ColumnProps[] = [
  { type: "selection", label: "", width: 80 },
  { prop: "sort", label: "排序值", width: 100 },
  { prop: "categoryName", label: "分类" },
  { prop: "cover", label: "封面", width: 120 },
  { prop: "goUrl", label: "前往地址" },
  { prop: "opera", label: "操作", width: 200 }
];

const opera = (row: any) => {
  const params: any = {
    row: row
      ? row
      : {
          category: undefined,
          url: "",
          cover: "",
          goUrl: "",
          louPanId: parseInt(route.query.id as string),
          sort: 1,
          roomId: parseInt(route.query.roomId as string)
        },
    api: row ? editSwiper : createSwiper,
    getTable: proRef.value?.getTableList,
    disabled: row ? true : false
  };
  swRef.value?.acceptParams(params);
};
</script>

<style></style>
